<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>百度地图测试</title>
    <style type="text/css">
      html {
        height: 100%;
      }

      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      #map_container {
        height: 600px;
        width: 800px;
      }

      .anchorBL {
        display: none;
      }

      .BMap_stdMpZoom {
        display: block;
      }
    </style>
    <script src="https://api.map.baidu.com/getscript?v=1.0&type=webgl&ak=yvu4YGW9MmqqgipzLiiwtX6Yk7SvIFSF"></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <script src="http://mapv.baidu.com/build/mapv.min.js"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
  </head>

  <body>
    <div id="map_container"></div>
    <script>
      var map = initBMap();
      var data = initData();
      setData(data, map);

      // 1. 初始化 地图
      function initBMap() {
        var cityCenter = mapv.utilCityCenter.getCenterByCityName("郑州");
        // 引入的 common 中的工具方法
        var bmapgl = initMap({
          tilt: 0,
          center: [cityCenter.lng, cityCenter.lat],
          zoom: 6,
          style: snowStyle,
        });
        return bmapgl;
      }

      // 准备数据源
      function initData() {
        var data = [];
        var cities = [
          "北京",          "天津",          "上海",          "重庆",          "石家庄",          "太原",          "呼和浩特",
          "哈尔滨",          "长春",          "沈阳",          "济南",          "南京",          "合肥",          "杭州",
          "南昌",          "福州",          "郑州",          "武汉",          "长沙",          "广州",          "南宁",
          "西安",          "银川",          "兰州",          "西宁",          "乌鲁木齐",          "成都",          "贵阳",
          "昆明",          "拉萨",          "海口",
        ];
        var random = 700;
        while (random--) {
          // mapv 提供的方法，根据城市名 获取 城市中心位置
          var cityCenter = mapv.utilCityCenter.getCenterByCityName(
            cities[parseInt(Math.random() * cities.length)]
          );
          data.push({
            geometry: {
              type: "Point", // 类型 点
              coordinates: [
                cityCenter.lng - 2 + Math.random() * 4,
                cityCenter.lat - 2 + Math.random() * 4,
              ], // 坐标
            },
            // 点的数值
            properties: {
              sales: Math.random() * 50,
            },
          });
        }
        // 过滤掉过小的数据
        data = data.filter(_=>_.properties.sales>20);
        return data;
      }

      // 绘制数据源
      function setData(data, map) {
        // 1. 生成 mapvl 视图 View
        var view = new mapvgl.View({ map: map });
        // 初始化 Intensity 对象
        var intensity = new mapvgl.Intensity({
          //控制大小
          min: 0,
          max: 50,
          minSize: 5,
          maxSize: 20,
          //控制颜色
          gradient: {
            0: "rgb(25, 66, 102, 0.8)",
            0.3: "rgb(145, 102, 129, 0.8)",
            0.7: "rgb(210, 131, 137, 0.8)",
            1: "rgb(248, 177, 149, 0.8)",
          },
        });
        //2. 初始化 mapvgl 的 PointLayer 对象
        var pointLayer = new mapvgl.PointLayer({
          size: function(data) {
            return intensity.getSize(data.properties.sales); // 使用 Intensity 控制大小
          },
          color: function(data) {
            return intensity.getColor(data.properties.sales); // 使用 Intensity 控制颜色
          }
        });
        //3. 将PointLayer对象加入 View 中
        view.addLayer(pointLayer);
        //4. 将data 与 Point 进行绑定
        pointLayer.setData(data);
      }
    </script>
  </body>
</html>
